<template>
  <div class="life-page">
    <h2 class="page-title">人生规划</h2>
    
    <div class="life-content">
      <!-- 人生目标 -->
      <section class="life-section">
        <h3 class="section-title">
          <i class="fas fa-bullseye"></i>
          人生目标
        </h3>
        <div class="goals-list">
          <div v-for="goal in goals" 
               :key="goal.id" 
               class="goal-card"
               :class="{ completed: goal.completed }">
            <div class="goal-header">
              <h4 class="goal-title">{{ goal.title }}</h4>
              <span class="goal-category" :style="{ backgroundColor: goal.categoryColor }">
                {{ goal.category }}
              </span>
            </div>
            <p class="goal-description">{{ goal.description }}</p>
            <div class="goal-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: goal.progress + '%' }"></div>
              </div>
              <span class="progress-text">{{ goal.progress }}%</span>
            </div>
            <div class="goal-footer">
              <span class="goal-date">{{ formatDate(goal.targetDate) }}</span>
              <div class="goal-actions">
                <button @click="editGoal(goal)" class="action-btn edit" title="编辑">
                  <i class="fas fa-edit"></i>
                </button>
                <button @click="deleteGoal(goal)" class="action-btn delete" title="删除">
                  <i class="fas fa-trash-alt"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 添加目标按钮 -->
          <button @click="showAddGoal = true" class="add-goal-btn">
            <i class="fas fa-plus"></i>
            <span>添加新目标</span>
          </button>
        </div>
      </section>

      <!-- 人生里程碑 -->
      <section class="life-section">
        <h3 class="section-title">
          <i class="fas fa-flag-checkered"></i>
          人生里程碑
        </h3>
        <div class="timeline">
          <div v-for="milestone in milestones" 
               :key="milestone.id" 
               class="timeline-item"
               :class="{ completed: milestone.completed }">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <div class="timeline-header">
                <h4 class="timeline-title">{{ milestone.title }}</h4>
                <span class="timeline-date">{{ formatDate(milestone.date) }}</span>
              </div>
              <p class="timeline-description">{{ milestone.description }}</p>
              <div class="timeline-actions">
                <button @click="editMilestone(milestone)" class="action-btn edit" title="编辑">
                  <i class="fas fa-edit"></i>
                </button>
                <button @click="deleteMilestone(milestone)" class="action-btn delete" title="删除">
                  <i class="fas fa-trash-alt"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 添加里程碑按钮 -->
          <button @click="showAddMilestone = true" class="add-milestone-btn">
            <i class="fas fa-plus"></i>
            <span>添加里程碑</span>
          </button>
        </div>
      </section>
    </div>

    <!-- 添加/编辑目标对话框 -->
    <div v-if="showAddGoal || editingGoal" class="dialog">
      <div class="dialog-content">
        <h3>{{ editingGoal ? '编辑目标' : '添加新目标' }}</h3>
        <form @submit.prevent="saveGoal" class="goal-form">
          <div class="form-group">
            <label for="goalTitle">目标名称</label>
            <input 
              type="text" 
              id="goalTitle"
              v-model="goalForm.title"
              required
              placeholder="输入目标名称"
            >
          </div>
          
          <div class="form-group">
            <label for="goalDescription">目标描述</label>
            <textarea 
              id="goalDescription"
              v-model="goalForm.description"
              required
              placeholder="描述你的目标"
              rows="3"
            ></textarea>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label for="goalCategory">分类</label>
              <select id="goalCategory" v-model="goalForm.category" required>
                <option value="事业">事业</option>
                <option value="学习">学习</option>
                <option value="生活">生活</option>
                <option value="健康">健康</option>
                <option value="财务">财务</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="goalProgress">完成进度</label>
              <input 
                type="range" 
                id="goalProgress"
                v-model.number="goalForm.progress"
                min="0"
                max="100"
                step="5"
              >
              <span class="progress-value">{{ goalForm.progress }}%</span>
            </div>
          </div>
          
          <div class="form-group">
            <label for="goalDate">目标日期</label>
            <input 
              type="date" 
              id="goalDate"
              v-model="goalForm.targetDate"
              required
            >
          </div>
          
          <div class="dialog-actions">
            <button type="button" @click="cancelGoal" class="cancel-btn">取消</button>
            <button type="submit" class="save-btn">保存</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 添加/编辑里程碑对话框 -->
    <div v-if="showAddMilestone || editingMilestone" class="dialog">
      <div class="dialog-content">
        <h3>{{ editingMilestone ? '编辑里程碑' : '添加新里程碑' }}</h3>
        <form @submit.prevent="saveMilestone" class="milestone-form">
          <div class="form-group">
            <label for="milestoneTitle">里程碑名称</label>
            <input 
              type="text" 
              id="milestoneTitle"
              v-model="milestoneForm.title"
              required
              placeholder="输入里程碑名称"
            >
          </div>
          
          <div class="form-group">
            <label for="milestoneDescription">描述</label>
            <textarea 
              id="milestoneDescription"
              v-model="milestoneForm.description"
              required
              placeholder="描述这个里程碑"
              rows="3"
            ></textarea>
          </div>
          
          <div class="form-group">
            <label for="milestoneDate">日期</label>
            <input 
              type="date" 
              id="milestoneDate"
              v-model="milestoneForm.date"
              required
            >
          </div>
          
          <div class="form-group">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="milestoneForm.completed"
              >
              已完成
            </label>
          </div>
          
          <div class="dialog-actions">
            <button type="button" @click="cancelMilestone" class="cancel-btn">取消</button>
            <button type="submit" class="save-btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Life',
  data() {
    return {
      goals: [],
      milestones: [],
      showAddGoal: false,
      showAddMilestone: false,
      editingGoal: null,
      editingMilestone: null,
      goalForm: {
        title: '',
        description: '',
        category: '事业',
        progress: 0,
        targetDate: '',
        completed: false
      },
      milestoneForm: {
        title: '',
        description: '',
        date: '',
        completed: false
      },
      categoryColors: {
        '事业': '#4f46e5',
        '学习': '#10b981',
        '生活': '#f59e0b',
        '健康': '#ef4444',
        '财务': '#8b5cf6'
      }
    }
  },
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    },
    editGoal(goal) {
      this.editingGoal = goal
      this.goalForm = { ...goal }
    },
    editMilestone(milestone) {
      this.editingMilestone = milestone
      this.milestoneForm = { ...milestone }
    },
    saveGoal() {
      const goalData = {
        ...this.goalForm,
        id: this.editingGoal?.id || Date.now(),
        categoryColor: this.categoryColors[this.goalForm.category]
      }
      
      if (this.editingGoal) {
        const index = this.goals.findIndex(g => g.id === this.editingGoal.id)
        if (index !== -1) {
          this.goals[index] = goalData
        }
      } else {
        this.goals.unshift(goalData)
      }
      
      this.saveData()
      this.cancelGoal()
    },
    saveMilestone() {
      const milestoneData = {
        ...this.milestoneForm,
        id: this.editingMilestone?.id || Date.now()
      }
      
      if (this.editingMilestone) {
        const index = this.milestones.findIndex(m => m.id === this.editingMilestone.id)
        if (index !== -1) {
          this.milestones[index] = milestoneData
        }
      } else {
        this.milestones.unshift(milestoneData)
      }
      
      this.saveData()
      this.cancelMilestone()
    },
    deleteGoal(goal) {
      if (confirm('确定要删除这个目标吗？')) {
        const index = this.goals.findIndex(g => g.id === goal.id)
        if (index !== -1) {
          this.goals.splice(index, 1)
          this.saveData()
        }
      }
    },
    deleteMilestone(milestone) {
      if (confirm('确定要删除这个里程碑吗？')) {
        const index = this.milestones.findIndex(m => m.id === milestone.id)
        if (index !== -1) {
          this.milestones.splice(index, 1)
          this.saveData()
        }
      }
    },
    cancelGoal() {
      this.editingGoal = null
      this.showAddGoal = false
      this.goalForm = {
        title: '',
        description: '',
        category: '事业',
        progress: 0,
        targetDate: '',
        completed: false
      }
    },
    cancelMilestone() {
      this.editingMilestone = null
      this.showAddMilestone = false
      this.milestoneForm = {
        title: '',
        description: '',
        date: '',
        completed: false
      }
    },
    saveData() {
      localStorage.setItem('lifeGoals', JSON.stringify(this.goals))
      localStorage.setItem('lifeMilestones', JSON.stringify(this.milestones))
    },
    loadData() {
      try {
        const savedGoals = localStorage.getItem('lifeGoals')
        const savedMilestones = localStorage.getItem('lifeMilestones')
        
        if (savedGoals) {
          this.goals = JSON.parse(savedGoals)
        }
        if (savedMilestones) {
          this.milestones = JSON.parse(savedMilestones)
        }
      } catch (e) {
        console.error('Failed to load life data:', e)
      }
    }
  },
  created() {
    this.loadData()
  }
}
</script>

<style scoped>
.life-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--dark);
  font-weight: 600;
  text-align: center;
}

.life-content {
  display: grid;
  gap: 30px;
}

.life-section {
  background: var(--card-bg);
  border-radius: var(--border-radius-md);
  padding: 30px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.section-title {
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title i {
  color: var(--primary);
}

/* 目标卡片样式 */
.goals-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.goal-card {
  background: white;
  border-radius: var(--border-radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid var(--gray-light);
}

.goal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.goal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.goal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
}

.goal-category {
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 12px;
  color: white;
}

.goal-description {
  font-size: 0.95rem;
  color: var(--gray);
  margin-bottom: 16px;
  line-height: 1.5;
}

.goal-progress {
  margin-bottom: 16px;
}

.progress-bar {
  height: 6px;
  background: var(--gray-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.85rem;
  color: var(--gray);
}

.goal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goal-date {
  font-size: 0.85rem;
  color: var(--gray);
}

.goal-actions {
  display: flex;
  gap: 8px;
}

/* 里程碑时间线样式 */
.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-light);
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-dot {
  position: absolute;
  left: -34px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid white;
  box-shadow: 0 0 0 2px var(--primary);
}

.timeline-content {
  background: white;
  border-radius: var(--border-radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.timeline-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
}

.timeline-date {
  font-size: 0.85rem;
  color: var(--gray);
}

.timeline-description {
  font-size: 0.95rem;
  color: var(--gray);
  margin-bottom: 16px;
  line-height: 1.5;
}

.timeline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 按钮样式 */
.add-goal-btn,
.add-milestone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--gray-light);
  border: 2px dashed var(--gray);
  border-radius: var(--border-radius-sm);
  color: var(--gray);
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}

.add-goal-btn:hover,
.add-milestone-btn:hover {
  background: var(--gray);
  color: white;
  border-color: var(--gray);
}

/* 对话框样式 */
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 24px;
  border-radius: var(--border-radius-md);
  width: 90%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
}

.dialog-content h3 {
  margin-bottom: 20px;
  color: var(--dark);
}

.form-group {
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--dark);
  font-weight: 500;
}

input[type="text"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--gray-light);
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  transition: var(--transition);
}

input[type="range"] {
  width: 100%;
  margin-right: 12px;
}

.progress-value {
  font-size: 0.9rem;
  color: var(--gray);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.cancel-btn,
.save-btn {
  padding: 8px 20px;
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}

.cancel-btn {
  background: var(--gray-light);
  color: var(--dark);
  border: none;
}

.save-btn {
  background: var(--primary);
  color: white;
  border: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .life-page {
    padding: 15px;
  }

  .life-section {
    padding: 20px;
  }

  .goals-list {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .timeline {
    padding-left: 20px;
  }

  .timeline-dot {
    left: -24px;
  }
}

@media (max-width: 480px) {
  .life-page {
    padding: 10px;
  }

  .life-section {
    padding: 15px;
  }

  .page-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .goal-card,
  .timeline-content {
    padding: 15px;
  }

  .dialog-content {
    padding: 20px;
  }
}

/* 动画效果 */
.goal-card,
.timeline-item {
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 